<template>
    <div class="drawerForm-wrapper">
      <el-drawer
        title="修改派车单"
        direction="rtl"
        :close-on-click-modal="false"
        :visible.sync="detailVisible">
        <el-form
          :inline="true"
          label-width="94px"
          ref="editForm"
          :model="editForm"
          style="position: relative"
        >
          <div class="mark">
            <span><i class="el-icon-warning-outline"></i>蓝色为可修改内容，每一次修改系统都会记录，请慎重修改！</span>
          </div>
            <el-row>
                <el-form-item class="require select" label="派车单号:">
                    <el-input v-model="editForm.transport.transCode" v-thousands.transCode="editForm.transport"  @focus="getTransportClient"></el-input>
                </el-form-item>
                <el-form-item label="业务流程:">
                    <div class="adjust-content">{{$dictUtils.getDictLabel('processType', this.viewForm.business.processType, '')}}</div>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="发运计划:">
                    <el-input v-model="viewForm.transportPlan.planCode" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="客户名称:">
                <el-input v-model="viewForm.business.companyName" :disabled="true"></el-input>
            </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="产品名称:">
                    <el-input v-model="viewForm.product.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item class="price" label="产品单价:">
                    <div>
                        <p class="adjust-content">{{this.viewForm.price}}({{$dictUtils.getDictLabel("payMode", this.viewForm.payMode, "")}}) </p>  <el-checkbox v-model="this.viewForm.isFreight" :disabled="true">含运费</el-checkbox>
                    </div>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="车牌号:">
                    <el-input v-model="viewForm.transport.truckNumber" v-thousands.truckNumber="viewForm.transport" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="车轴类型:">
                    <el-input v-model="viewForm.axle.axle" :disabled="true"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="司机姓名:">
                    <el-input v-model="viewForm.truckDriver.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="司机电话:">
                    <el-input v-model="viewForm.truckDriver.phone" :disabled="true"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
            <div class="title">
                <el-form-item label="重量信息:">
                    <span>(单位:吨)</span>
                </el-form-item>
            </div>
            </el-row>

            <el-row>
                <el-form-item label="毛重:">
                    <el-input v-model="viewForm.weightGross" v-thousands.weightGross="viewForm" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="皮重:">
                    <el-input v-model="viewForm.weightTare"  v-thousands.weightTare="viewForm" :disabled="true"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="净重:">
                    <el-input v-model="viewForm.netWeight" v-thousands.netWeight="viewForm" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item class="require" label="暗扣:">
                    <el-input v-model="editForm.deductWeight" v-thousands.deductWeight="editForm"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item class="require" label="扣杂:">
                    <el-input v-model="editForm.deductWeightImpurity" v-thousands.deductWeightImpurity="editForm"></el-input>
                </el-form-item>
                <el-form-item class="require" label="扣水:">
                    <el-input v-model="editForm.deductWeightWater" v-thousands.deductWeightWater="editForm"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item class="require" label="超载(调整):">
                    <el-input v-model="editForm.overloadAdjustWeight" v-thousands.overloadAdjustWeight="editForm"></el-input>
                </el-form-item>
                <el-form-item label="毛重(调整):">
                    <el-input v-model="viewForm.weightGross" :disabled="true" v-thousands.weightGross="viewForm"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="皮重(调整):">
                    <el-input v-model="viewForm.weightTare" v-thousands.weightTare="viewForm" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="净重(调整):">
                    <el-input v-model="viewForm.netWeight" v-thousands.netWeight="viewForm" :disabled="true"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="标载:">
                    <el-input v-model="viewForm.axle.maxGross"  v-thousands.maxGross="viewForm.axle" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="超载:">
                    <el-input v-model="viewForm.overloadWeight" v-thousands.overloadWeight="viewForm" :disabled="true"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item class="require" label="原发数:">
                    <el-input v-model="editForm.originalWeight" v-thousands.originalWeight="editForm"></el-input>
                </el-form-item>
                <el-form-item class="require" label="合理路耗:">
                    <el-input v-model="editForm.allowLossWeight" v-thousands.allowLossWeight="editForm"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="路耗:">
                    <el-input v-model="viewForm.lossWeight" :disabled="true" v-thousands.lossWeight="viewForm"></el-input>
                </el-form-item>
            </el-row>
          <div class="detail">
            <div align="center">
              <el-button type="primary" @click="detailVisible = false">确定</el-button>
                <el-button class="save" @click="doSubmit">提交</el-button>
                <el-button @click="detailVisible = false">取消</el-button>
            </div>
          </div>
        </el-form>
      </el-drawer>
      <!--派车单选择弹窗-->
      <TransportDialog ref="TransportDialog" @getTransportData="getTransportData">
      </TransportDialog>
    </div>
</template>

<script>
  import { queryTurnoverById, updateWeight } from '@/api/weightingManagent/weight.js'
  import TransportDialog from '@/components/dialog/transportDialog.vue'
    export default {
      name: 'updateTransport',
      components: {
        TransportDialog
      },
      data () {
        return {
          detailVisible: false,
          viewForm: {
            transport: {
              id: '',
              truckId: '',
              truckNumber: '',
              driverId: '',
              productId: '',
              originalDate: '',
              originalGross: '',
              originalTare: '',
              originalWeight: '',
              state: '',
              transProps: '',
              transportPlanId: '',
              transCode: ''
            },
            deductWeight: '',
            deductWeightWater: '',
            deductWeightImpurity: '',
            overloadAdjustWeight: '',
            originalWeight: '',
            allowLossWeight: '',
            id: '',
            business: {
              codes: '',
              companyName: '',
              dataType: '',
              id: '',
              processType: ''
            },
            product: {
              name: ''
            },
            transportPlan: {
              planCode: ''
            },
            axle: {
              axle: '',
              maxGross: ''
            },
            gross: {
              id: '',
              weightMeasured: '',
              weightTime: ''
            },
            grossEquip: {
              outerCode: ''
            },
            grossRoom: {
              name: ''
            },
            tare: {
              id: '',
              weightMeasured: '',
              weightTime: ''
            },
            tareEquip: {
              outerCode: ''
            },
            tareRoom: {
              name: ''
            },
            truckDriver: {
              name: '',
              phone:''
            }
          },
          editForm: {
            transport: {
              id: '',
              truckId: '',
              truckNumber: '',
              driverId: '',
              productId: '',
              originalDate: '',
              originalGross: '',
              originalTare: '',
              originalWeight: '',
              state: '',
              transProps: '',
              transportPlanId: '',
              transCode: '',
              truckTrailId: ''
            },
            deductWeight: '',
            deductWeightWater: '',
            deductWeightImpurity: '',
            overloadAdjustWeight: '',
            originalWeight: '',
            allowLossWeight: '',
            id: '',
            business: {
              codes: '',
              companyName: '',
              dataType: '',
              id: '',
              processType: ''
            },
            product: {
              name: ''
            },
            transportPlan: {
              planCode: ''
            },
            axle: {
              axle: '',
              maxGross: ''
            },
            gross: {
              id: '',
              weightMeasured: '',
              weightTime: ''
            },
            grossEquip: {
              outerCode: ''
            },
            grossRoom: {
              name: ''
            },
            tare: {
              id: '',
              weightMeasured: '',
              weightTime: ''
            },
            tareEquip: {
              outerCode: ''
            },
            tareRoom: {
              name: ''
            },
            truckDriver: {
              name: '',
              phone:''
            }
          }
        }
      },
      methods: {
      	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
        init (method, row) {
          if (method === 'update') {
            this.detailVisible = true
            queryTurnoverById({
              id: row.id
            }).then(({data}) => {
              if (data.code === '200') {
                this.viewForm = data.result
                this.editForm.business.id = this.viewForm.business.id
                this.editForm.transport.id = this.viewForm.transport.id
                this.editForm.transport.transportPlanId = this.viewForm.transport.transportPlanId
                this.editForm.transport.transCode = this.viewForm.transport.transCode
                this.editForm.deductWeight = this.viewForm.deductWeight
                this.editForm.deductWeightWater = this.viewForm.deductWeightWater
                this.editForm.deductWeightImpurity = this.viewForm.deductWeightImpurity
                this.editForm.overloadAdjustWeight = this.viewForm.overloadAdjustWeight
                this.editForm.originalWeight = this.viewForm.originalWeight
                this.editForm.allowLossWeight = this.viewForm.allowLossWeight
                this.editForm.id = this.viewForm.id
                if(this.viewForm.truckDriver===undefined){
                  this.$set(this.viewForm, 'truckDriver', {name:'',phone:''})
                  this.$set(this.editForm, 'truckDriver', {name:'',phone:''})
                }else{
                  this.editForm.truckDriver.name = this.viewForm.truckDriver.name
                  this.editForm.truckDriver.phone = this.viewForm.truckDriver.phone
                }
                this.editForm.transport.truckTrailId = this.viewForm.truckTrailId
              }
            })
          }
        },
        doSubmit () {
          this.editForm.id = this.viewForm.id
          updateWeight(this.editForm).then(({data}) => {
            if (data.code === '200') {
              this.$message({
                message: '发起修改磅单审批流程',
                type: 'success'
              })
              this.detailVisible = false
              this.$emit('refreshDataList')
            }
          })
        },
        // 派车单选择弹窗
        getTransportClient () {
          this.$refs['TransportDialog'].dialogVisible = true
        },
        // 派车单选择数据回显
        getTransportData (row) {
            this.editForm.business.id = row.business.id
            this.editForm.transport.id = row.id
            this.editForm.transport.transCode = row.transCode
            this.editForm.transport.transportPlanId = row.transportPlanId
            this.editForm.business.processType = row.business.processType
            this.editForm.transport.truckTrailId = row.truckTrailId
            this.viewForm.business.processType = row.business.processType
            this.viewForm.transportPlan.planCode =row.transportPlan.planCode
            this.viewForm.business.companyName = row.business.companyName
            this.viewForm.product.name = row.product.name
            this.viewForm.price = row.price
            this.viewForm.payMode = row.payMode
            this.viewForm.isFreight = row.isFreight
            this.viewForm.transport.truckNumber = row.truckNumber
            this.viewForm.axle.axle = row.axle.axle
            this.viewForm.truckDriver.name = row.truckDriver.name
            this.viewForm.truckDriver.phone = row.truckDriver.phone
            this.dialogVisible = false
        }
      }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/config.scss";
  .drawerForm-wrapper{
    ::v-deep.el-drawer{
        .el-drawer__body{
          padding: 0 40px 24px;
            .el-input__inner{
                width: 220px !important;
            }
            .el-button.save{
                background: #F59A23;
                color: #FFFFFF;
                border: 1px solid #F59A23;
                margin-right: 5px;
                margin-left: 15px;
            }
            .el-button.save+.el-button{
                margin-right: 5px;
            }
            .el-button.save:hover{
                background-color: #e98f23 !important;
                color: #FFFFFF;
                border: 1px solid #e98f23;
            }
        }
        .mark{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FF3E3E;
            margin-bottom: 20px;
            i{
                margin-right: 5px;
            }
        }
        .el-form{
            .title .el-form-item{
                color: #000000;

                .el-form-item__label{
                    color: #000000;
                }
                span{
                    font-size: 16px;
                }
            }
            .el-form-item{
                margin-right: 20px;
              &:last-child{
                margin-right: 0;
              }
            }
            .el-form-item.require{
                .el-form-item__label{
                    color: #1089FF;
                }
            }
            .el-form-item.select{
                .el-input__inner{
                    cursor: pointer;
                }
            }
            .adjust-content{
                padding: 0 10px;
                background: #EEEEEE;
                height: 36px;
                border: 1px solid #AAAAAA;
                border-radius: 4px;
                color: #999999;
                cursor: not-allowed;
            }
            .adjust-content:hover{
                border-color: $--color-primary-liyu;
            }
            div.adjust-content{
                width: 220px;
            }
            p.adjust-content{
                display: inline-block;
                width: 140px;
                margin: 0 10px 0 0;
            }
            .price{
                .el-checkbox{
                    color: #1089FF;
                    .el-checkbox__inner{
                        border: 1px solid #1089FF;
                    }
                }
                .el-checkbox.is-checked{
                    .el-checkbox__inner{
                        border-color: $--color-primary-liyu;
                    }
                }
            }
        }
        .detail{
            margin-top: 10px;
        }
    }
  }
</style>
